<template>
  <div class="report-list">
    <div class="rl-content white-card">
      <div class="search-box" ref="searchBar">
        <el-form
          :model="form"
          ref="form"
          size="medium"
          label-width="100px"
          class="demo-form"
        >
          <el-row>
            <el-col :xs="12" :sm="12" :md="8" :lg="6" :xl="6">
              <el-form-item label="申请人" prop="applyAdminName">
                <el-input
                  placeholder="请输入申请人"
                  v-model="form.applyAdminName"
                  clearable
                  @clear="handleSearch"
                  @keyup.enter.native="handleSearch"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :xs="12" :sm="12" :md="8" :lg="6" :xl="6">
              <el-form-item label="客户单位" prop="appId" label-width="100px">
                <el-select
                  style="width: 100%"
                  v-model="form.appId"
                  placeholder="请选择客户单位"
                  filterable
                  clearable
                  @change="handleSearch"
                >
                  <el-option
                    v-for="item in localAppList"
                    :key="item.appId"
                    :label="item.appName"
                    :value="item.appId"
                    @change="handleSearch"
                  >
                    <span>{{ item.appName }}</span>
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :xs="12" :sm="12" :md="8" :lg="6" :xl="6">
              <el-form-item label="项目名称" prop="cardName">
                <el-select
                  style="width: 100%"
                  v-model="form.cardType"
                  placeholder="请选择项目名称"
                  filterable
                  clearable
                  @change="handleSearch"
                >
                  <el-option
                    v-for="item in cardTypeList"
                    :key="item.value"
                    :label="item.cardName"
                    :value="item.cardType"
                    @change="handleSearch"
                  >
                    <span>{{ item.cardName }}</span>
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :xs="12" :sm="12" :md="8" :lg="6" :xl="6">
              <el-form-item
                label="职途卡类型"
                prop="applyType"
                label-width="100px"
              >
                <el-select
                  style="width: 100%"
                  v-model="form.applyType"
                  placeholder="请选择职途卡类型"
                  clearable
                  @change="handleSearch"
                >
                  <el-option
                    v-for="item in applyTypeOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                    @change="handleSearch"
                  >
                    <span>{{ item.label }}</span>
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :xs="12" :sm="12" :md="8" :lg="6" :xl="6">
              <el-form-item label="任务状态" prop="applyState">
                <el-select
                  style="width: 100%"
                  v-model="form.applyState"
                  placeholder="请选择任务状态"
                  @change="handleSearch"
                >
                  <el-option
                    v-for="item in taskStatusOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                    @change="handleSearch"
                  >
                    <span>{{ item.label }}</span>
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :xs="12" :sm="12" :md="8" :lg="6" :xl="6">
              <el-form-item label="申请时间" prop="consultantName">
                <el-date-picker
                  style="width: 100%"
                  v-model="form.applyTime"
                  :picker-options="pickerOptions"
                  :clearable="false"
                  type="daterange"
                  range-separator="-"
                  valueFormat="yyyy-MM-dd"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  @change="handleSearch"
                >
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :xs="12" :sm="12" :md="8" :lg="6" :xl="6">
              <el-form-item label-width="20px">
                <el-button type="primary" size="small" @click="handleSearch"
                  >筛选</el-button
                >
                <el-button @click="handleReset">重置</el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <div class="table-wrap">
        <div class="operate-bar">
          <!-- <el-button
            plain
            round
            size="small"
            :loading="exportLoading"
            @click="exportAll"
            >{{ exportLoading ? "导出中..." : "卡号导出" }}</el-button
          > -->
          <el-button
            v-has="'apply'"
            plain
            type="primary"
            size="small"
            @click="handleApplyCard"
            >申请职途卡</el-button
          >
        </div>
        <div :style="{ height: tableHeight + 'px' }">
          <el-table
            :data="list"
            height="100%"
            v-loading="loading"
            highlight-current-row
            tooltip-effect="light"
            :header-cell-class-name="'header_name_style'"
          >
            <el-table-column
              type="index"
              width="75"
              align="center"
              label="序号"
            >
            </el-table-column>
            <el-table-column
              prop="cardTypeName"
              label="项目名称"
              min-width="120"
              show-overflow-tooltip
            >
              <template slot-scope="scope">
                <span>
                  {{ scope.row.cardTypeName }}
                </span>
                <el-tag v-if="scope.row.cardType == 0" type="danger" size="mini"
                  >新建</el-tag
                >
              </template>
            </el-table-column>
            <el-table-column
              prop="applyAdminName"
              label="申请人"
              show-overflow-tooltip
            ></el-table-column>
            <!-- <el-table-column
            prop="department"
            label="申请部门"
            min-width="100"
            show-overflow-tooltip
          ></el-table-column> -->
            <el-table-column
              prop="appName"
              :show-overflow-tooltip="true"
              label="客户单位"
              min-width="100"
            >
            </el-table-column>
            <el-table-column
              prop="applyNum"
              label="申请张数"
              min-width="70"
              align="center"
            ></el-table-column>
            <el-table-column
              prop="applyType"
              label="职途卡类型"
              min-width="120"
              align="center"
            >
              <template slot-scope="scope">
                <span>
                  {{ getApplyTypeName(scope.row.applyType) }}
                </span>
                <el-tag v-if="scope.row.isTest == 1" type="warning" size="mini"
                  >测试</el-tag
                >
              </template>
            </el-table-column>
            <el-table-column label="申请权益" min-width="100">
              <template slot-scope="scope">
                <el-button
                  type="text"
                  @click="handleViewRightsAndPrice(scope.row)"
                  >查看详情</el-button
                >
              </template>
            </el-table-column>
            <!-- 以前权益列表还是一级的时候的展示方式，要先留着 -->
            <!-- <el-table-column label="申请权益" min-width="100">
              <template
                slot-scope="scope"
                v-if="Array.isArray(scope.row.list) && scope.row.list.length"
              >
                <el-popover
                  placement="top-start"
                  title=""
                  popper-class="el-popover-self"
                  trigger="hover"
                >
                  <div class="list-box">
                    <div
                      class="item"
                      v-for="(item, index) in scope.row.list"
                      :key="index"
                    >
                      <span class="name">{{ item.rightName }}</span>
                    </div>
                  </div>
                  <div slot="reference" class="currentName-3">
                    <span
                      class="name pointer"
                      @click="handleViewRightsAndPrice(scope.row)"
                    >
                      {{ scope.row.list[0].rightName }}...</span
                    >
                  </div>
                </el-popover>
              </template>
            </el-table-column> -->
            <el-table-column
              prop="applyState"
              label="任务状态"
              :show-overflow-tooltip="true"
              min-width="100"
            >
              <template slot-scope="scope">
                <div class="state-box">
                  <img
                    class="state-img"
                    :src="getApplyStateName(scope.row.applyState, 'img')"
                    alt=""
                  />
                  <span
                    :class="getApplyStateName(scope.row.applyState, 'class')"
                    >{{
                      getApplyStateName(scope.row.applyState, "label")
                    }}</span
                  >
                </div>
              </template>
            </el-table-column>
            <el-table-column
              min-width="140"
              :show-overflow-tooltip="true"
              prop="createTime"
              label="申请时间"
            >
            </el-table-column>
            <!-- <el-table-column
            min-width="140"
            :show-overflow-tooltip="true"
            prop="expireTime"
            label="有效期至"
          >
          </el-table-column> -->
            <!-- <el-table-column prop="auditAdminName" label="审核人" min-width="120">
          </el-table-column> -->
            <el-table-column fixed="right" label="操作" width="250">
              <template slot-scope="scope">
                <div class="operation-button">
                  <el-button
                    v-has="'applyDetail'"
                    type="text"
                    @click="handleTaskDetail(scope.row)"
                    >申请详情</el-button
                  >
                  <el-button
                    v-if="scope.row.applyType != 3 && scope.row.applyState == 1"
                    type="text"
                    @click="exportAll(scope.row)"
                    >卡号导出</el-button
                  >
                  <el-button
                    v-if="scope.row.applyType == 3 && scope.row.applyState == 1"
                    type="text"
                    @click="checkQrCode(scope.row)"
                    >查看二维码</el-button
                  >
                  <el-button
                    v-has="'delete'"
                    type="text"
                    @click="handleDeleteRecord(scope.row)"
                    >删除</el-button
                  >
                </div>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="pager" v-if="list.length > 0">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="page.currentPage"
            :page-sizes="page.pageSizes"
            :page-size="page.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="page.sums"
            background
          ></el-pagination>
        </div>
      </div>
    </div>
    <ApplyDetailDialog
      v-if="TaskDetailDialogVisible"
      :visible.sync="TaskDetailDialogVisible"
      :selectedRow="selectedRow"
      :localAppList="localAppList"
      :auditerList="auditerList"
      @refresh="getData"
    />
    <QrcodeDialog :visible.sync="showQrCode" :applyId="applyId"></QrcodeDialog>
    <ApplyCardDialog
      :visible.sync="applyNewCardVisible"
      @refresh="getData"
    ></ApplyCardDialog>
    <RightTreeDialog
      :cardType="currentCardType"
      :visible.sync="rightTreeVisible"
    ></RightTreeDialog>
  </div>
</template>

<script>
import {
  getApplyRecord,
  getProjectList,
  removeApplyRecord,
  getTaskList,
  applicationList,
  getAuditerList,
  cardTypeList,
} from "@/api/index";
import Axios from "axios";
import { apiJava } from "@/api/root";
import { downLoadFile } from "@/utils/downLoadFile";
import page from "@/mixin/page";
import auditting from "@/assets/images/auditting.png";
import finished from "@/assets/images/finished.png";
import rejected from "@/assets/images/rejected.png";
export default {
  components: {
    ApplyDetailDialog: () => import("./components/ApplyDetailDialog.vue"),
    QrcodeDialog: () => import("./components/QrcodeDialog.vue"),
    ApplyCardDialog: () => import("./components/ApplyCardDialog.vue"),
    RightTreeDialog: () => import("../components/RightTreeDialog.vue"),
  },
  mixins: [page],
  data() {
    return {
      auditting,
      rejected,
      finished,
      tableHeight: "auto",
      TaskDetailDialogVisible: false,
      applyNewCardVisible: false,
      rightTreeVisible: false,
      currentCardType: "",
      loading: false,
      dataType: "el-dialog",
      list: [],
      currentRow: [],
      form: {
        applyAdminName: "",
        appId: "",
        applyType: "",
        applyTime: [],
        applyState: 3,
        cardType: "",
      },
      applyTypeOptions: [
        { label: "职途实体卡", value: 1 },
        { label: "职途电子卡", value: 2 },
        { label: "线上二维码", value: 3 },
      ],
      isTestCardOptions: [
        { label: "全部", value: 2 },
        { label: "正式卡", value: 0 },
        { label: "测试卡", value: 1 },
      ],
      taskStatusOptions: [
        { label: "全部", value: 3, img: "" },
        { label: "待审核", value: 0, img: auditting, class: "auditting" },
        { label: "审核通过", value: 1, img: finished, class: "finished" },
        { label: "审核未通过", value: 2, img: rejected, class: "rejected" },
      ],
      rightList: [],
      exportLoading: false,
      currentConsultantId: "",
      currentPersonId: "",
      localAppList: [],
      personNameOptions: [],
      consultantNameOptions: [],
      currentSelectApplyPersonInfo: { id: "" },
      projectList: [],
      auditerList: [],
      selectedRow: {},
      isTestOptions: [
        { label: "正式数据", value: 0 },
        { label: "测试数据", value: 1 },
        { label: "全部", value: 2 },
      ],
      applyId: "",
      showQrCode: false,
      cardTypeList: [],
    };
  },
  computed: {
    pickerOptions() {
      return {
        disabledDate(time) {
          const date1 = new Date("2023-09-01");
          const date2 = new Date(
            new Date().getFullYear() +
              "-" +
              ("0" + (new Date().getMonth() + 1)).substr(-2) +
              "-" +
              ("0" + new Date().getDate()).substr(-2)
          );
          const diff = date2 - date1 + 60 * 60 * 24 * 1000;
          return (
            time.getTime() < Date.now() - diff || Date.now() < time.getTime()
          );
        },
      };
    },
  },
  async created() {
    window.addEventListener("resize", this.getHeight);
    this.applicationListFn();
    this.getAuditerListFn();
    await this.getProjectListFn();
    this.getData();
    this.getTaskList();
  },
  mounted() {
    this.getHeight();
  },
  destroyed() {
    window.removeEventListener("resize", this.getHeight);
  },
  methods: {
    handleViewRightsAndPrice(row) {
      this.currentCardType = row.cardType;
      this.rightTreeVisible = true;
    },
    handleApplyCard() {
      this.applyNewCardVisible = true;
    },
    getApplyTypeName(type) {
      const temp = this.applyTypeOptions.find((item) => item.value == type);
      if (temp) {
        return temp.label;
      }
    },
    getHeight() {
      this.tableHeight =
        window.innerHeight - this.$refs.searchBar.offsetHeight - 210;
    },
    cell({ row, column, rowIndex, columnIndex }) {
      if (
        columnIndex === 2 ||
        columnIndex === 3 ||
        columnIndex === 5 ||
        columnIndex === 7 ||
        columnIndex === 8 ||
        columnIndex === 9 ||
        columnIndex === 10
      ) {
        return "font-size: 14px;font-family: PingFangSC, PingFang SC;font-weight: 400;color: #333333;";
      }
      if (columnIndex === 4) {
        return "font-size: 14px;font-family: PingFangSC, PingFang SC;font-weight: 400;color: #333333;";
      }
    },
    getAuditerListFn() {
      getAuditerList().then((res) => {
        if (res.code == 200) {
          this.auditerList = res.data;
        }
      });
    },
    applicationListFn() {
      applicationList().then((res) => {
        if (res.code == 200) {
          this.localAppList = res.data;
        }
      });
    },
    cancel() {
      this.personSelectVisible = false;
    },
    getApplyStateName(state, str) {
      const temp = this.taskStatusOptions.find((item) => item.value == state);
      if (temp) {
        return temp[str];
      }
      return {};
    },
    async getTaskList() {
      const res = await getTaskList();
      this.rightList = res.data;
    },
    handleTaskDetail(row) {
      this.selectedRow = row;
      this.TaskDetailDialogVisible = true;
    },
    async getProjectListFn() {
      getProjectList().then((res) => {
        if (res.code == 200) {
          this.projectList = res.data;
          this.cardTypeList = res.data;
        }
      });
    },
    checkQrCode(val) {
      this.applyId = val.applyId;
      this.showQrCode = true;
    },
    handleDeleteRecord(val) {
      this.$confirm("此操作将永久删除该记录, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          const params = {
            applyId: val.applyId,
          };
          this.removeApplyRecordFn(params);
        })
        .catch(() => {});
    },
    removeApplyRecordFn(params) {
      removeApplyRecord(params)
        .then((res) => {
          if (res.code == 200) {
            this.$message.success("申请记录删除成功！");
            this.getData();
          } else {
            this.$message.error(res.status_desc);
          }
        })
        .catch((err) => {
          this.$message.error(err.status_desc);
        });
    },
    exportAll(val) {
      this.exportLoading = true;
      let params = {
        applyId: val.applyId,
      };
      Axios({
        method: "post",
        url: apiJava + "/api-career/apply/card/export",
        data: params,
        responseType: "arraybuffer",
        headers: {},
        timeout: "60000",
      })
        .then((res) => {
          downLoadFile(res, "职途卡号数据.xlsx");
        })
        .catch(() => {
          this.$message.error("导出失败");
        })
        .finally(() => {
          this.exportLoading = false;
        });
    },
    getData() {
      this.loading = true;
      let params = {
        ...this.form,
        startTime:
          Array.isArray(this.form.applyTime) && this.form.applyTime.length > 1
            ? this.form.applyTime[0] + " 00:00:00"
            : "",
        endTime:
          Array.isArray(this.form.applyTime) && this.form.applyTime.length > 1
            ? this.form.applyTime[1] + " 23:59:59"
            : "",
        pageNo: this.page.currentPage,
        pageSize: this.page.pageSize,
      };
      getApplyRecord(params)
        .then((res) => {
          if (res.code == 200) {
            this.list = res.data;
            this.page.sums = res.pageparam.sums;
          } else {
            this.list = [];
            this.loading = false;
            this.$message.error(res.status_desc);
          }
        })
        .catch((err) => {
          this.list = [];
          this.loading = false;
          this.$message.error(err.message);
        })
        .finally(() => {
          this.loading = false;
        });
    },
    async handleSearch() {
      this.$set(this.page, "currentPage", 1);
      this.getData();
    },
    handleReset() {
      this.form.applyAdminName = "";
      this.form.appId = "";
      this.form.applyType = "";
      this.form.applyState = 3;
      this.form.applyTime = [];
      this.form.cardType = '';
      this.handleSearch();
    },
  },
};
</script>

<style>
.el-popover.el-popper.el-popover-self {
  min-width: 20px !important;
}
</style>

<style lang="scss" scoped>
.report-list {
  background: url("../../../assets/images/bigBg.png") no-repeat;
  background-position: center;
  background-size: 100% 100%;
  .rl-content {
    margin: 12px 12px 0 12px;

    .search-box {
      padding: 22px 24px 0 12px;
      border-bottom: 1px solid #e8e8e8;
    }

    .table-wrap {
      box-shadow: 0 0 0 0;
      overflow: hidden;
      .operate-bar {
        display: flex;
        margin-bottom: 12px;
        /deep/ .el-button--small.is-round {
          font-size: 14px;
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          color: #555555;
        }
      }

      .my-icon {
        color: #c0c4cc;
      }

      .currentName-1 {
        color: #ba4bee;
      }

      .currentName-2 {
        color: #999999;
      }

      .currentName-3 {
        color: #666;

        .name {
          color: #6a4aff;
          padding-left: 4px;
          font-weight: 400;
        }
      }

      .currentName-4 {
        color: #0cb354;
      }
    }

    .operation-button {
      /deep/ .el-button--text {
        font-weight: 400;
      }
    }
    .pointer {
      cursor: pointer;
    }
  }
}
.list-box {
  .item {
    display: flex;
    justify-content: space-between;
    color: #999;
    padding: 2px 0;

    .isActive {
      color: #1890ff;
    }
    .finish-type {
      margin-left: 5px;
    }
    .unfinishColor {
      color: #999999;
    }
    .doingColor {
      color: #6a4aff;
    }
    .finishColor {
      color: #000000;
    }
  }
}
.state-box {
  display: flex;
  align-items: center;
  .state-img {
    width: 16px;
    height: 16px;
    margin-right: 4px;
  }

  .auditting {
    color: #008fc4;
  }

  .finished {
    color: #0cb354;
  }

  .rejected {
    color: #ff7732;
  }
}

/deep/ .el-col-12 {
  width: 25%;
}

/deep/ .el-range-editor--small .el-range-separator {
  line-height: 24px;
  font-size: 13px;
  width: 25px;
}
/deep/ .header_name_style {
  font-size: 14px;
  font-family: PingFang-SC, PingFang-SC;
  font-weight: bold;
  color: #6c7481;
}
</style>
